<template>
  <div>
    <a-card
      v-if="form.openType == 0"
      :loading="loading"
      :headStyle="{ borderBottom: '0', paddingRight: '13px' }"
      :bodyStyle="{ padding: 0 }"
      :bordered="false"
      size="small"
    >
      <template slot="extra"> </template>

      <div
        style="display: flex; align-items: flex-start; justify-content: center"
      >
        <div class="tab-add" v-if="mode == 1">
          <a-tooltip>
            <template slot="title"> 添加视图 </template>
            <a-dropdown>
              <a-icon class="pointer" type="plus"></a-icon>
              <a-menu slot="overlay">
                <a-menu-item> <a-icon type="table" />表格 </a-menu-item>
                <a-menu-item> <a-icon type="pic-center" />看板 </a-menu-item>
                <a-menu-item> <a-icon type="calendar" />日历 </a-menu-item>
                <a-menu-divider />
                <a-menu-item> <a-icon type="picture" />画廊 </a-menu-item>
                <a-menu-item> <a-icon type="apartment" />层级 </a-menu-item>
                <a-menu-item> <a-icon type="fork" />甘特图 </a-menu-item>
              </a-menu>
            </a-dropdown>
          </a-tooltip>
        </div>
        <div
          style="width: 100%"
          v-if="mode == 1 || (mode == 0 && list.datas.length > 1)"
        >
          <a-tabs :default-active-key="tabkey" v-model="tabkey" size="small">
            <a-tab-pane :key="item.configId" v-for="item in list.datas">
              <span slot="tab">
                {{ item.name }}
                <a-dropdown v-if="mode == 1">
                  <a-icon type="caret-down" />
                  <a-menu slot="overlay">
                    <a-menu-item @click="settingListClick(item)">
                      <a-icon type="setting" />配置视图
                    </a-menu-item>
                    <a-sub-menu key="test">
                      <template slot="title">
                        <a-icon type="swap" />更改视图类型
                      </template>
                      <a-menu-item> <a-icon type="table" />表格 </a-menu-item>
                      <a-menu-item>
                        <a-icon type="pic-center" />看板
                      </a-menu-item>
                      <a-menu-item>
                        <a-icon type="calendar" />日历
                      </a-menu-item>
                      <a-menu-divider />
                      <a-menu-item> <a-icon type="picture" />画廊 </a-menu-item>
                      <a-menu-item>
                        <a-icon type="apartment" />层级
                      </a-menu-item>
                      <a-menu-item> <a-icon type="fork" />甘特图 </a-menu-item>
                    </a-sub-menu>
                    <a-menu-item> <a-icon type="copy" />复制 </a-menu-item>
                    <a-menu-divider />
                    <a-menu-item> <a-icon type="download" />导出 </a-menu-item>
                    <a-menu-item>
                      <a-icon style="color: red" type="delete" /><label
                        style="color: red"
                        >删除视图</label
                      >
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </span>
            </a-tab-pane>

            <template slot="tabBarExtraContent" v-if="mode == 1">
              <div
                style="
                  font-size: 17px;
                  color: #333;
                  font-weight: 700;
                  margin-right: 10px;
                "
              >
                <a-icon :type="form.icon"></a-icon
                ><span style="margin-left: 10px">{{ form.name }}</span>
                <a-dropdown>
                  <a-icon
                    class="pointer"
                    style="margin-left: 10px"
                    type="ellipsis"
                  />
                  <a-menu slot="overlay">
                    <a-menu-item @click="desingerEdit">
                      <a-icon type="form" />编辑表单
                    </a-menu-item>
                    <a-menu-divider />
                    <a-menu-item @click="buttonEdit"
                      ><a-icon type="border" />自定义按钮</a-menu-item
                    >
                    <a-menu-item><a-icon type="printer" />打印模版</a-menu-item>
                  </a-menu>
                </a-dropdown>
              </div>
            </template>
          </a-tabs>
        </div>
      </div>
      <div :key="item.configId" v-for="item in list.datas">
        <run-list
          ref="runList"
          v-if="item.configId == tabkey"
          :key="item.configId"
          :name="form.name"
          :configId="item.configId"
          :menuId="form.menuId"
          :havecard="mode == 1 || (mode == 0 && list.datas.length > 1)"
        ></run-list>
      </div>

      <desinger
        v-if="setting.view.desinger.visible"
        ref="desinger"
        :visible.sync="setting.view.desinger.visible"
        :title="form.name"
        :menuId="form.menuId"
      ></desinger>

      <desinger-list
        v-if="setting.view.list.visible"
        ref="settingList"
        :visible.sync="setting.view.list.visible"
        :title="setting.view.list.title"
        :configId="setting.view.list.configId"
      ></desinger-list>
    </a-card>

    <run-iframe
      v-if="form.openType == 1"
      :key="form.menuId"
      :url="form.iframePath"
      @public="listPublic"
    ></run-iframe>

    <button-list
      v-if="setting.view.buttonList.visible"
      :visible.sync="setting.view.buttonList.visible"
      :menuId="form.menuId"
      :title="setting.view.buttonList.title"
      @comfirm="buttonComfirm"
    ></button-list>
  </div>
</template>
    
    <script>
import { findByMenuId } from "@/services/system/agile/app/desinger";
import { findById } from "@/services/system/menu/edit";
import eipSearch from "@/pages/common/usercontrol/eip-search";
import eipToolbar from "@/pages/common/usercontrol/eip-toolbar";
import desinger from "./desinger";
import runList from "@/pages/system/agile/run/list";
import runIframe from "@/pages/system/agile/run/iframe";
import desingerList from "@/pages/system/agile/list/desinger";
import buttonList from "@/pages/system/agile/app/components/button/index";
export default {
  components: {
    runIframe,
    runList,
    eipSearch,
    eipToolbar,
    desinger,
    desingerList,
    buttonList,
  },
  name: "build",
  data() {
    return {
      loading: true,
      tabkey: "",
      table: {
        page: {
          param: {
            current: 1,
            size: this.eipPage.size,
            sord: "asc",
            sidx: "OrderNo",
            filters: "",
          },
          total: 1000,
          sizeOptions: this.eipPage.sizeOptions,
        },
        loading: true,
        data: [],
        height: window.innerHeight - 318,
        search: {
          option: {
            labelCol: 8,
            wrapperCol: 16,
            num: 4,
            config: [],
          },
        },
      },

      setting: {
        view: {
          desinger: {
            visible: false,
            title: "",
          },

          list: {
            visible: false,
            title: "",
            configId: undefined,
          },

          buttonList: {
            visible: false,
            title: "",
          },
        },

        menu: [],
      },

      form: {
        menuId: null,
        name: null,
        icon: null,
        openType: null,
        iframePath: null,
      },

      list: {
        visible: false,
        datas: [],
      },
    };
  },
  props: {
    mode: {
      type: Number,
      default: 0,
    }, //模式:0操作，1设计
  },
  created() {
    this.$loading.show({ text: "加载中..." });
    const route = this.$route;
    if (this.mode == 0) {
      let that = this;
      let menuId = route.meta.menuId;
      findById(menuId).then(function (result) {
        that.reloadSetting(result.data);
      });
    } else {
      this.hideLoading();
    }
  },
  methods: {
    /**
     * 列表发布
     */
    listPublic() {
      this.reloadSetting(this.setting.menu);
    },

    /**
     * 编辑
     */
    desingerEdit() {
      this.setting.view.desinger.visible = true;
    },

    /**
     * 按钮
     */
    buttonComfirm() {
      this.$refs.runList[0].initButton();
    },

    /**
     * 重载配置
     */
    reloadSetting(menu) {
      let that = this;
      this.setting.menu = menu;
      this.form = {
        menuId: menu.menuId,
        name: menu.name,
        icon: menu.icon,
        openType: menu.openType,
        iframePath: menu.iframePath,
      };

      //若是设计表则加载对应配置项
      if (this.form.openType == 0) {
        findByMenuId({ menuId: this.form.menuId, configType: 1 }).then(
          function (result) {
            if (result.code === that.eipResultCode.success) {
              that.list.datas = result.data;
              that.tabkey = that.list.datas[0].configId;
            } else {
              that.$message.error(result.msg);
            }
            that.hideLoading();
          }
        );
      }
      //若是iframe
      else if (this.form.openType == 1) {
        that.hideLoading();
      } else {
        that.hideLoading();
      }
    },

    hideLoading() {
      this.loading = false;
      this.table.loading = false;
      this.$loading.hide();
    },

    /**
     *
     * @param {*} item
     */
    settingListClick(item) {
      this.setting.view.list.title = item.name;
      this.setting.view.list.configId = item.configId;
      this.setting.view.list.visible = true;
    },

    /**
     * 自定义按钮
     */
    buttonEdit() {
      this.setting.view.buttonList.visible = true;
      this.setting.view.buttonList.title = "自定义按钮";
    },
  },
};
</script>
    
    <style lang="less" scoped>
.tab-add {
  width: 61px;
  line-height: 17px;
  padding: 11px 10px 7px 10px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}
.pointer {
  cursor: pointer;
}

.ant-dropdown-menu {
  width: 150px;
}
/deep/ .ant-tabs-bar {
  margin: 0;
}
</style>
    